<template>
	<view class="login-container">
		<image class="logo" src="/static/logo.png"></image>
		<view class="login-title">欢迎登录</view>
		<view class="login-desc">点击下方按钮快速登录</view>
		<button class="login-btn" type="primary" @click="wechatLogin">
			微信一键登录
		</button>
		<view class="agreement">
			<view class="checkbox" :class="{ checked: agreeTerms }" @click="toggleAgreement">
				<text class="iconfont icon-check" v-if="agreeTerms"></text>
			</view>
			<text class="agreement-text">
				我已阅读并同意
				<text class="agreement-link" @click="goToAgreement">《用户协议》</text>
				和
				<text class="agreement-link" @click="goToPrivacy">《隐私政策》</text>
			</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import api from '@/utils/api.js'
	const agreeTerms = ref(false)




	// #ifdef MP-WEIXIN
	const wxLogin = async (code) => {
		try {
			const result = await api.user.wxlogin(code);
			if (result.code === 200) {
				uni.showToast({
					title: '登录成功',
					icon: 'success',
					duration: 1500
				});
				const {
					user,
					token
				} = result.data
				uni.setStorageSync('token', token)
				uni.setStorageSync('user', JSON.stringify(user))

				// 跳转到首页
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}, 1000)

				// loginLoading.value = false
			}

			// 		console.log(result);
			// 		const {
			// 			user,
			// 			token
			// 		} = result.data
			// 		uni.setStorageSync('token', token)
			// 		uni.setStorageSync('user', JSON.stringify(user))

			// 		// 跳转到首页
			// 		setTimeout(() => {
			// 			uni.switchTab({
			// 				url: '/pages/index/index'
			// 			})
			// 		}, 1000)
		} catch (error) {
			uni.showToast({
				title: '登录失败',
				icon: 'none'
			});
		}
	}

	const wechatLogin = () => {
		// if (wechatLoading.value) return;
		// wechatLoading.value = true;
		uni.login({
			provider: 'weixin', // 使用微信登录
			success: function(res) {
				wxLogin(res.code)
			},
			fail: function() {
				uni.showToast({
					title: '微信登录失败',
					icon: 'none',
					duration: 2000
				});
				// wechatLoading.value = false;
			},
			complete: function() {
				// wechatLoading.value = false;
			}
		})
	}
	// #endif






	// 模拟后端登录接口
	// const mockApi = {
	// 	login: (data) => {
	// 		return new Promise((resolve, reject) => {
	// 			console.log("正在将以下数据发送给后端：", data);
	// 			setTimeout(() => {
	// 				// 模拟登录成功，返回一个 token
	// 				if (data.code && data.userInfo) {
	// 					resolve({
	// 						code: 200,
	// 						msg: "登录成功",
	// 						data: {
	// 							token: "mock_token_" + Date.now(),
	// 							openid: "mock_openid_" + Date.now(),
	// 						},
	// 					});
	// 				} else {
	// 					reject({
	// 						code: 500,
	// 						msg: "登录失败，缺少必要参数",
	// 					});
	// 				}
	// 			}, 1000);
	// 		});
	// 	},
	// };

	// const wechatLogin = () => {
	// 	console.log("用户点击了微信登录按钮");
	// 	// 1. 获取登录凭证 code
	// 	uni.login({
	// 		provider: 'weixin', // 使用微信登录
	// 		success: (res) => {
	// 			console.log("uni.login 成功，获取到 code：", res.code);
	// 			if (res.code) {
	// 				// 2. 获取用户信息
	// 				uni.getUserProfile({
	// 					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途
	// 					success: (profileRes) => {
	// 						console.log("uni.getUserProfile 成功，获取到用户信息：", profileRes.userInfo);
	// 						// 3. 将 code 和用户信息发送给后端
	// 						requestLoginApi(res.code, profileRes.userInfo);
	// 					},
	// 					fail: (err) => {
	// 						console.log("uni.getUserProfile 失败：", err);
	// 						uni.showToast({
	// 							title: '您已取消授权',
	// 							icon: 'none',
	// 							duration: 2000,
	// 						});
	// 					},
	// 				});
	// 			}
	// 		},
	// 		fail: (err) => {
	// 			console.error("uni.login 失败：", err);
	// 			uni.showToast({
	// 				title: '微信登录失败，请重试',
	// 				icon: 'none',
	// 				duration: 2000,
	// 			});
	// 		},
	// 	});
	// };



	const toggleAgreement = () => {
		agreeTerms.value = !agreeTerms.value
	}
	const goToAgreement = () => {
		uni.navigateTo({
			url: '/pages/subpages/agreement/agreement'
		});
	}

	const goToPrivacy = () => {
		uni.navigateTo({
			url: '/pages/subpages/privacy/privacy'
		});
	}
</script>

<style scoped>
	.login-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 50rpx;
		background-color: #f8f8f8;
	}

	.logo {
		width: 200rpx;
		height: 200rpx;
		border-radius: 40rpx;
		margin-bottom: 50rpx;
	}

	.login-title {
		font-size: 48rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.login-desc {
		font-size: 14px;
		color: #888;
		margin-bottom: 80rpx;
	}

	.login-btn {
		width: 80%;
		border-radius: 50rpx;
		font-size: 32rpx;
		background-color: #07c160;
		border-color: #07c160;
		margin-bottom: 20rpx;
	}

	.login-btn:active {
		background-color: #06ad56;
	}

	.login-btn::after {
		border: none;
	}

	.checkbox {
		width: 32rpx;
		height: 32rpx;
		border: 2rpx solid #ddd;
		border-radius: 6rpx;
		margin-right: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
	}

	.checkbox.checked {
		background-color: #07C160;
		border-color: #07C160;
	}

	.checkbox .iconfont {
		font-size: 20rpx;
		color: #fff;
	}


	.agreement {
		display: flex;
		align-items: flex-start;
		margin-bottom: 40rpx;
		font-size: 26rpx;
		color: #666;
	}

	.agreement-text {
		flex: 1;
		line-height: 1.5;
	}

	.agreement-link {
		color: #07C160;
	}

	.icon-yanzhengma.success {
		color: green;
	}
</style>